$(function () {
  //功能一: 渲染文章列表
  /* 
  [1]定义函数,发起ajax请求
  [2]判断请求成功与否
  [3]如果成功渲染到页面上(art-template)
  */

  //封装补零函数
  function addZero(n) {
    return n < 10 ? "0" + n : n;
  }
  //定义过滤器函数
  template.defaults.imports.formDate = function (value) {
    //格式: YYYY-MM-DD HH:mm:ss
    value = new Date(value);
    //获取年
    const y = value.getFullYear();
    //获取月
    const m = addZero(value.getMonth() + 1);
    //获取日
    const d = addZero(value.getDate());
    //获取时
    const h = addZero(value.getHours());
    //获取分
    const f = addZero(value.getMinutes());
    //获取秒
    const s = addZero(value.getSeconds());
    return `${y}-${m}-${d}  ${h}:${f}:${s}`;
  };
  //数据
  const q = {
    pagenum: 1, //页码值
    pagesize: 2, //每页显示的条数
    cate_id: "", //文章分类的ID
    state: "", //文章状态
  };
  function renderArtList() {
    $.ajax({
      url: "/my/article/list",
      data: q,
      success: function (res) {
        if (res.status !== 0) return layer.msg(res.message, { icon: 5 });
        const str = template("title_list", res);
        $("tbody").html(str);

        //调用分页函数
        renderPage(res.total);
      },
    });
  }
  renderArtList();

  //功能二: 渲染文章分类
  /* 
  [1]定义函数,在函数中发起ajax请求
  [2]判断请求成功与否
  [3]如果成功,渲染到下拉框中(art-template)
  */
  function render() {
    $.get("/my/article/cates", function (res) {
      if (res.status !== 0) return layer.msg(res.message, { icon: 5 });
      const stt = template("titles", res);
      $('[name="cate_id"]').html(stt);
      layui.form.render();
    });
  }
  render();

  //功能三: 筛选功能
  /* 
  1)给表单注册submit提交事件
  2)阻止表单默认同步提交行为
  3)收集表单数据,文章分类的Id和文章状态
  4)修改renderArtList()函数里的文章分类和文章状态
  5)修改数据之后渲染数据
  */
  $("#form-search").on("submit", function (e) {
    e.preventDefault();
    let cateId = $('[name="cate_id"]').val();
    let state = $('[name="state"]').val();
    q.cate_id = cateId;
    q.state = state;
    renderArtList();
  });

  //功能四: 分页效果
  function renderPage(total) {
    layui.laypage.render({
      elem: "pageBox", //注意，这里的 test1 是 ID，不用加 # 号
      count: total, //数据总数，从服务端得到
      limit: q.pagesize, //每页显示的条数
      curr: q.pagenum, //页码值
      limits: [2, 4, 6, 8, 10],
      layout: ["count", "limit", "prev", "page", "next", "skip"], //分页排版
      /* 
      jump函数触发的两种情况:
        1) 渲染分页容器的时候触发,obj是分页对象,first值是true
        2) 点击分页按钮的时候触发,obj是分页对象,first值是undefined
      */
      jump: function (obj, first) {
        q.pagenum = obj.curr;
        q.pagesize = obj.limit;
        if (!first) {
          renderArtList();
        }
      },
    });
  }
  //功能五: 删除功能

  $("body").on("click", ".layui-btn-danger", function () {
    const len = $(".layui-btn-danger").length;
    let that = this;
    layer.confirm("确定删除?", { icon: 3, title: "提示" }, function (index) {
      const id = $(that).data("id");
      $.ajax({
        url: `/my/article/delete/${id}`,
        success: function (res) {
          if (res.status !== 0) return layer.msg(res.message, { icon: 5 });
          layer.msg(res.message, { icon: 6 });
          if (len === 1) {
            q.pagenum = q.pagenum === 1 ? 1 : q.pagenum - 1;
          }
          renderArtList();
        },
      });
      layer.close(index);
    });
  });


  // 功能六：实现编辑功能
  $("body").on("click", ".btn-edit", function () {
    // 获取id
    const id = $(this).data('id')
    // 跳转编辑页面
    location.href = `/article/art_edit.html?id=${id}`
  })
});
